<template>
  <a-modal
    :closable="true"
    :keyboard="true"
    :title="title"
    :width="width"
    v-model="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
  >
    <template #footer>
      <a-button key="enter" @click="close">
        关闭
      </a-button>
      <a-button type="primary" v-if="editable" :loading="loading" @click="toEdit">
        编辑
      </a-button>
    </template>

    <a-spin :spinning="confirmLoading">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-descriptions :title="infoName" :size="size" bordered>
          <a-descriptions-item v-for="(v, k) in infos" :key="k" v-if="!(k in myDict)" :label="v.label" :span="span(k)">
            {{ trans(k, v.value) }}
          </a-descriptions-item>
        </a-descriptions>
        <br />
        <a-descriptions :size="size" bordered>
          <a-descriptions-item label="备注" v-if="infos['memo']" span="3">
            {{ infos['memo'].value }}
          </a-descriptions-item>
        </a-descriptions>
        <br />
        <a-descriptions :size="size" bordered>
          <a-descriptions-item label="创建人" v-if="infos['create_by']">
            {{ infos['create_by'].value }}
          </a-descriptions-item>
          <a-descriptions-item label="创建时间" v-if="infos['create_time']" span="2">
            <a-icon type="clock-circle" />
            {{ infos['create_time'].value }}
          </a-descriptions-item>
          <a-descriptions-item label="最近修改人" v-if="infos['update_by']">
            {{ infos['update_by'].value }}
          </a-descriptions-item>
          <a-descriptions-item label="最近修改时间" v-if="infos['update_time']" span="2">
            <a-icon type="clock-circle" />
            {{ infos['update_time'].value }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <!-- 查询区域-END -->
    </a-spin>
  </a-modal>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import _ from 'lodash';

// 定义 props
const props = defineProps({
  size: {
    required: false,
    default: 'default'
  },
  footer: {
    required: false
  },
  editable: {
    required: false,
    default: true
  },
  paramNo: {
    required: false,
    default: 3
  },
  infoName: {
    required: true
  },
  columns: {
    type: Array,
    default: () => []
  },
  dictProperties: {
    type: Object,
    default: () => ({})
  },
  dictObj: {
    type: Object,
    default: () => ({})
  }
});

// 定义 emits
const emit = defineEmits(['toEdit']);

// 响应式数据
const form = ref(null);
const disableMixinCreated = ref(true);
const description = ref('详细信息');
const confirmLoading = ref(false);
const title = ref('详细信息');
const width = ref('70%');
const infos = reactive({});
const record = reactive({});
const myDict = reactive({
  memo: { title: "备注", type: 2 },
  create_by: { title: "创建人", type: 2 },
  create_time: { title: "创建时间", type: 4 },
  update_by: { title: "最近修改人", type: 2 },
  update_time: { title: "最近修改时间", type: 4 }
});
const visible = ref(false);
const loading = ref(false);

// 计算属性
const importExcelUrl = computed(() => {
  return `${window._CONFIG['domianURL']}/${props.url?.importExcelUrl}`;
});

// 方法
const span = (k) => {
  if (k === "fee_items") return 2;
  switch (props.paramNo) {
    case 3: return 1;
    case 2: return 2;
    case 1: return 3;
  }
};

const trans = (k, v) => {
  let arr, tmp;
  if (props.dictProperties[k] && props.dictProperties[k].options) {
    arr = props.dictProperties[k].options;
    v = v.replace(/[1-9]+(?=,)?/g, (i) => {
      console.error(`k: ${k},i: ${i}`);
      tmp = arr.find((a) => a.value === i);
      return tmp && tmp.title;
    });
  }
  if (props.dictObj && props.dictObj[k]) return props.dictObj[k][v];
  return v;
};

const detail = (record, exceptions) => {
  // columns和exceptions会决定项目是否会显示
  console.log(record);
  const newInfos = {};
  let column;
  // 支持从column上找label,或自定义dic中找
  for (const i in record) {
    if (Array.isArray(exceptions) && exceptions.includes(i)) continue;
    if (props.columns) {
      column = props.columns.find((c) => c.dataIndex === i && c.is_show === 1);
    }
    let label, type, multi;
    if (column) {
      label = column.title;
      type = column.field_type;
      multi = column.dict_code && column.dict_code.split(";")[1];
    } else if (myDict[i]) {
      label = myDict[i].title;
      type = myDict[i].type;
    }
    if (label) {
      newInfos[i] = {
        value: record[i],
        label,
        type,
        multi
      };
    }
  }
  console.log(newInfos);
  Object.assign(infos, newInfos);
  Object.assign(record, record);
  visible.value = true;
};

const toEdit = () => {
  // console.error(JSON.stringify(record))
  emit('toEdit', record);
  close();
};

const close = () => {
  // this.$emit('close')
  visible.value = false;
};

</script>

